# Vue 实战：环境搭建

我们现在就用 Vue 最主流的技术栈结合 typescript 来实现一个「待办 WebAPP」。

# 安装 Vue CLI

要快速初始化项目首选肯定是 Vue 官方的 Vue CLI，首先我们在全局安装包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

笔者的版本是 3.12.0，建议尽量跟我的版本一致。

# 创建项目

我们用命令行初始化项目：

vue create vue-ts-todo

当然，如果你不习惯命令行的操作可以用图形化界面：

vue ui

但是我还是习惯用命令行初始化，但是 UI 界面可视化效果更好，更有助于我们讲清楚配置过程，所以我们选择 UI 界面:

接着我们创建目录名称、选择包管理工具、填入git仓库地址：

选择手动配置，然后选择 Vue 的全家桶，但是没有选择测试相关的内容，因为本项目主要目的是帮助大家进行实战练习，在非生产环境没必要测试：

接着我们的配置如下，如下：

这里有几项我们解释一下：

• Use class-style component syntax? Y ：我们选择用组件装饰器语法，长什么之后大家就看到了，目前这个装饰器语法是 ts+vue 的主流选择
• Pick a linter / formatter config？ prettier：这个看个人喜好，我喜欢 prettier 代码美化这套美化方法
• Use Babel alongside TypeScript for auto-detected polyfills? N：已经有了 TypeScript，我不想再引入 Babel 进行转义了
• 关于 CSS 预处理的问题，我选择了SASS，使用的是node-sass，目前而言 node-sass 比 dart-sass 似乎更快一些

大功告成

# 改造项目

项目的整体目录结构是这样的：

我们把注意力放在 src/ 目录中：